<template>
  <div class="dashboard-container">
    <div class="dashboard-re-btn">
      <el-button
        type="primary"
        icon="el-icon-refresh-right"
        circle
        @click="refreshEcharts"
      />
    </div>
    <Card :data-source="infoCard" />
    <el-row :gutter="8">
      <el-col :span="8">
        <el-card>
          <bar-chart :config="barConfig" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <bar-chart :config="lineConfig" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <pie-chart :config="pieConfig" />
        </el-card>
      </el-col>
    </el-row>

    <el-row :gutter="8">
      <el-col :span="8">
        <el-card>
          <bar-chart :config="barConfig2" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <bar-chart :config="lineConfig2" />
        </el-card>
      </el-col>
      <el-col :span="8">
        <el-card>
          <pie-chart :config="pieConfig2" />
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Card from '@neu/biz-core/components/Card'
import BarChart from '@neu/biz-core/components/Charts/BarChart'
import PieChart from '@neu/biz-core/components/Charts/PieChart'

export default {
  name: 'Dashboard',
  components: {
    Card,
    BarChart,
    PieChart
  },
  data() {
    return {
      infoCard: [
        // 卡片
        { name: '待办任务', total: '10', icon: 'todo', totalColor: 'success' },
        { name: '当前告警', total: '0', icon: 'alarm', totalColor: 'danger' },
        {
          name: '巡检异常点',
          total: '2',
          icon: 'unusual',
          totalColor: 'warning'
        },
        {
          name: '离线设备总量',
          total: '1',
          icon: 'info',
          totalColor: 'primary'
        },
        {
          name: '异常设备总数',
          total: '0',
          icon: 'info',
          totalColor: 'primary'
        },
        {
          name: '监控设备总数',
          total: '350',
          icon: 'monitor',
          totalColor: 'info'
        }
      ],
      lineConfig: {
        type: 'line',
        title: '资产统计'
      },
      lineConfig2: {
        type: 'line',
        title: '资产统计',
        smooth: true,
        shadow: true,
        formatter: {
          x: '{value}!',
          y: '{value} 台'
          // tooltip: "{a}--{b}--{c}",
        }
      },
      barConfig: {
        type: 'bar',
        title: '资产统计'
      },
      barConfig2: {
        type: 'bar3D',
        title: '资产统计'
      },
      pieConfig: {
        type: 'pie',
        title: '资产统计'
      },
      pieConfig2: {
        type: 'pieNest',
        title: '资产统计'
      }
    }
  },
  computed: {
    //
  },
  created() {
    const dataSource = [
      ['财年', '2015', '2016', '2017'],
      ['车辆', 43.3, 85.8, 93.7],
      ['办公电子', 83.1, 73.4, 55.1],
      ['电子相关', 86.4, 65.2, 82.5],
      ['财务用品', 72.4, 53.9, 39.1]
    ]
    this.lineConfig.dataSource = dataSource
    this.lineConfig2.dataSource = dataSource
    this.barConfig.dataSource = dataSource
    this.barConfig2.dataSource = dataSource
    this.pieConfig.dataSource = dataSource
    this.pieConfig2.dataSource = dataSource
  },
  methods: {
    genRandom(a, b) {
      if (!a) {
        throw new Error('a不能为空')
      }
      let x = Math.floor(Math.random() * a)
      if (b) {
        x = x / b
      }
      return x
    },
    mockConfig(config) {
      const dataSource = []
      dataSource.push(['财年', '2015', '2016', '2017'])
      dataSource.push([
        '车辆',
        this.genRandom(10000, 100),
        this.genRandom(10000, 100),
        this.genRandom(10000, 100)
      ])
      dataSource.push([
        '办公电子',
        this.genRandom(10000, 100),
        this.genRandom(10000, 100),
        this.genRandom(10000, 100)
      ])
      dataSource.push([
        '电子相关',
        this.genRandom(10000, 100),
        this.genRandom(10000, 100),
        this.genRandom(10000, 100)
      ])
      dataSource.push([
        '财务用品',
        this.genRandom(10000, 100),
        this.genRandom(10000, 100),
        this.genRandom(10000, 100)
      ])
      return {
        ...config,
        dataSource: dataSource,
        title: '东软云统计' + this.genRandom(10)
      }
    },
    refreshEcharts() {
      let i = 0
      const dura = 300
      this.lineConfig = this.mockConfig(this.lineConfig)
      i++
      setTimeout(() => {
        this.lineConfig2 = this.mockConfig(this.lineConfig2)
      }, dura * i)
      i++
      setTimeout(() => {
        this.barConfig = this.mockConfig(this.barConfig)
      }, dura * i)
      i++
      setTimeout(() => {
        this.barConfig2 = this.mockConfig(this.barConfig2)
      }, dura * i)
      i++
      setTimeout(() => {
        this.pieConfig = this.mockConfig(this.pieConfig)
      }, dura * i)
      i++
      setTimeout(() => {
        this.pieConfig2 = this.mockConfig(this.pieConfig2)
      }, dura * i)
    }
  }
}
</script>
<style lang="scss" scoped>
.dashboard-re-btn {
  position: absolute;
  top: 21%;
  right: 2%;
  z-index: 500;
}
</style>
